<template>
   <div>
       <div>需求1:点击盒子变成蓝色，文字变成白色</div>
       <div class="flex-layout">
          <div class="box-style" :class="{'box-active-style':activeIndex==index}" v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
      </div>

      <div>2.返回的数组中flag为true就显示绿色,flag为false就显示为红色</div>
       <div class="flex-layout">
          <!-- 1.对象写法，如果想根据返回的数据判断样式时,也可以写多个 -->
            <div class="box-style" :class="{'box-green-style':item.flag, 'box-red-style': !item.flag }"  v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
      </div>

     <div>3.返回的数组中flag为true就显示绿色,flag为false就显示为红色---三元表达式写法</div>
         <div class="flex-layout">
              <!-- 1.三元表达式写法 -->
              <div class="box-style" :class="item.flag ? 'box-green-style' : 'box-red-style'"  v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
    </div>

      <div>4.返回的数组中flag为true就显示绿色,flag为false就显示为红色---计算属性的写法</div>
           <div class="flex-layout">
                <!-- 1.计算属性的写法 -->
                <div class="box-style" :class="classObject(item.flag)"  v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
      </div>

       <div>5.返回的数组中flag为true就显示绿色,flag为false就显示为红色---数组的写法1</div>
             <div class="flex-layout">
                  <!-- 1.数组的写法 -->
                  <!-- 数组里面可以存放多个类名(静态类名也可以，也可以在里面写三元表达式，多个类名用逗号分割, -->
                  <div  :class="['box-style',item.flag ? 'box-green-style' : 'box-red-style']"  v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
      </div>

      <div>6.返回的数组中flag为true就显示绿色,flag为false就显示为红色---数组的写法2</div>
               <div class="flex-layout">
                    <!-- 1.数组的写法 -->
                    <!-- 数组里面可以存放多个类名(静态类名也可以，也可以在里面写三元表达式，多个类名用逗号分割, -->
                    <!--boxGreenStyle这个要是驼峰的形式就不需要加引号，如果是-的形式就要用加引号  -->
                    <div  :class="['box-style',{ boxGreenStyle:item.flag,  boxRedStyle: !item.flag }]"  v-for="(item, index) in list " :key="index" @click="clickTab(index)">{{ item.name }}</div>
        </div>




   </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: null,
      activeIndexTwo:null,
      list: [
        {
          id: 1,
          name: '内容1',
          flag:true
        },
        {
          id: 2,
          name: '内容2',
          flag: false
        },
        {
          id: 3,
          name: '内容3',
          flag: true
        }
       ]
    }
  },
  computed: {
    classObject() {
      return function (flag) {
           return flag ? 'box-green-style' : 'box-red-style'
       }
    }
  },
  methods: {
    clickTab(index) {
      // this.activeIndex = index
      this.activeIndexTwo=index
    }
   }
}
</script>

<style lang="scss" scoped>
.flex-layout{
  width:300px;
  display: flex;
  justify-content: space-around;
  .box-style{
   width: 80px;
   height: 50px;
   background:#f5f5f5;
   border-radius: 8px;
   line-height: 50px;
   text-align: center;
  }
  .box-active-style{
   background:#2472c8;
  }
  .box-red-style{
    background: red;
  }

  .boxRedStyle{
      background: red;
  }

  .box-green-style{
    background: green;
  }
  .boxGreenStyle{
     background: green;
  }
  .box-skyblue-style{
     background: skyblue
  }
  .box-pink-style{
    background: pink;
  }
}

</style>
